<template>
  <div class="relevance-construction-wrap">
    <div v-if="!isExhibition" class="stages-box">
      <div class="stages">
        <div v-for="(item, index) in selectData" :key="index" class="date-picker-item">
          <el-form-item :rules="rules['contractInfo.contractCodes.code']" :prop="setProp(index)">
            <mul-input-item-wrap :index="index" v-model="item.code" :max-length="20" :show-del="index !== 0" placeholder="请输入关联合同编号" @delete="deleteStage" />
          </el-form-item>
        </div>
      </div>
      <div v-if="isCanAdd" class="add-btn" @click="add">
        添加
      </div>
    </div>
    <div v-else class="exhibition-box">
      <template v-if="displayContracts && displayContracts.length > 0">
        <div v-for="(item, index) in displayContracts" :key="index" class="code-display-box">
          <div style="width: 200px">
            <el-tooltip v-if="item.code" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ item.code || '--' }}</div>
              <div class="code-content">{{ item.code }}</div>
            </el-tooltip>
          </div>
          <span class="copy-btn" @click="copyCopy(item.code)">复制</span>
        </div>
      </template>
      <span v-else>无</span>
    </div>
  </div>
</template>
<script>
import MulInputItemWrap from './mulInputItem';
import addIcon from '@/assets/reportManage/add_icon.png';
export default {
  name: 'RelevanConstruct',
  components: { MulInputItemWrap },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Array,
      default: () => {
        return null;
      }
    },
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    customPropVal: {
      type: String,
      default: 'contractInfo.contractCodes'
    },
    isExhibition: {
      type: Boolean,
      default: false
    },
    hideAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addIcon
    };
  },
  computed: {
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    },
    isCanAdd() {
      return !this.hideAdd && this.selectData.length < 10;
    },
    displayContracts() {
      const contracts = [];
      if (this.selectData && this.selectData.length > 0) {
        this.selectData.forEach(item => {
          if (item.code) {
            contracts.push(item);
          }
        });
      }
      return contracts;
    }
  },
  methods: {
    setProp(index) {
      return this.customPropVal + '.' + index + '.code';
    },
    add() {
      const item = { code: '' };
      this.selectData.push(item);
    },
    // 复制合同编码
    copyCopy(code) {
      this.$copyText(code).then(e => {
        this.$message({
          message: '合同编号已复制到剪切板',
          type: 'success'
        });
      }, (e) => {
        console.error(e);
      });
    },
    deleteStage(index) {
      if (index !== -1) {
        this.selectData.splice(index, 1);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import url('./common.scss');
.stages-box {
  margin-top: 0;
}
.copy-btn {
  cursor: pointer;
  color: #192452;
  margin-left: 9px;
  font-weight: bold;
}
.code-display-box {
  display: flex;
}
.code-content {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
